<template>
  <div class="middle">
    <toast ref="toast"/>
    <div class="middle-item" @click="to_space">
      <div class="title">
        <img src="../../assets/img/Profile/空间.svg" alt="">
        <div class="text">空间</div>
        </div>
      <img src="../../assets/img/Profile/point.svg" alt="">
    </div>
    <div class="middle-item" @click="to_collection">
      <div class="title">
        <img src="../../assets/img/Profile/微信收藏.svg" alt="">
        <div class="text">收藏</div>
        </div>
      <img src="../../assets/img/Profile/point.svg" alt="">
    </div>
    <div class="middle-item">
      <div class="title">
        <img src="../../assets/img/Profile/情侣.svg" alt="">
        <div class="text">情侣</div>
        </div>
      <img src="../../assets/img/Profile/point.svg" alt="">
    </div>
    </div>
  </div>
</template>

<script>
import Toast from '../../components/Toast/Toast.vue'

export default {
  components: { Toast },
  name: '',
  data () {
    return {
      
    }
  },
  computed:{
    nickname(){
      return this.$store.getters.user.nickname
    },
    _id(){
      return this.$store.getters.user._id
    }
  },
  methods:{
    to_space(){
      if(!this._id){
        let msg = "请先登录";
        let color = "Orange";
        this.$refs.toast.show(msg, color);
        return;
      }
      let uid = this._id
      let nickname = this.nickname
      this.$router.push('/space/' + uid +'/' + nickname)
    },
    to_collection(){
      if(!this._id){
        let msg = "请先登录";
        let color = "Orange";
        this.$refs.toast.show(msg, color);
        return;
      }
      this.$router.push('/collection')
    }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.middle{
  border-bottom: 10px solid #eee;
}
.middle-item{
  padding: 10px 10px;
  display: flex;

  border-bottom: #eee 2px solid;
}
.title{
  height: 44px;
  flex: 1;
  display: flex;
}
.text{
  line-height: 44px;
}
.middle-item img{
  width: 60px;
  height: 40px;
}
</style>